<template>
    <div class="searchSong">
        <!-- 搜索框 -->
       <div class="search">
           <input class='search_txt' type="text" v-model="msg"  placeholder="请输入内容">
           <input class="search_btn" type="button" value="搜索" @click="search()">
       </div>
        
        <!-- 搜索结果 -->
        <div class="result" v-if="result.length !== 0">
            <ul>
                <li v-for="(item,index) in result" :key="index" @click="singSong(item.id,index)">
                    <span class="num">{{index+1}}</span>
                    <span class="songName">{{item.name}}</span>
                    <span class="name">
                        <p v-for="(i,n) in item.artists" :key="n">{{i.name}}</p>
                    </span>
                    
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data(){
        return{
            result:[],
            msg:"",
            songList:[],
            songNum:null
        }
    },
    methods:{
        search(){
            var that = this;
            axios.get("http://netease.bluej.cn/search",{
                params:{
                    keywords:that.msg
                }
            }).then(function(res){
                that.result = res.data.result.songs;
                for(let i=0;i<that.result.length;i++){
                    that.songList[i] = that.result[i].id;
                }
            })
            this.$store.commit("changlist",{songList:this.songList,index:this.songNum})
        },
        singSong(songid,index){
            this.songNum = index;
            this.$store.commit("change",{playState:true,id:songid});
            this.$parent.$parent.$refs.player.getSong();
            this.$router.push({path:"/songdetail",query:{id:songid}})
        }
    }
}
</script>
<style scoped lang="scss">
    .searchSong{
        width:100vw;
        overflow: hidden;
        .search{
            width:100vw;
            height:20vw;
            .search_txt{
                width:70vw;
                height:10vw;
                float:left;
                margin:2vw 0 0 5vw;
                border:2px solid purple;
                border-radius: 5px 0 0 5px;
                outline:none;
                border-right:none;
                box-sizing: border-box;
                text-indent: 10px;
            }
            .search_btn{
                width:20vw;
                height:10vw;
                float:left;
                margin:2vw 0 0 0 ;
                outline:none;
                border:none;
                background:purple;
                border-radius: 0 5px 5px 0;
                color:#fff;
                line-height:6vh;
                text-align: center;
            }
        }
        .result{
            width:100vw;
            ul{
                li{
                    list-style: none;
                    height:15vw;
                    line-height: 15vw;
                    border-bottom:1px solid #f1f1f1;
                    span{
                        display: inline-block;
                    }
                    .num{
                        width:15vw;
                        height:15vw;
                        text-align: center;
                        color:#d8524a;
                        vertical-align: top;
                    }
                    .songName{
                         width:40vw;
                        margin-right:10px;
                        font-size:18px;
                         overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap
                    }
                    .name{
                        width:40vw;
                        font-size:14px;
                        color:#666;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        p{
                            display:inline-block;
                            margin-right:3px;
                        }
                    }
                }
            }
        }
    }
    
</style>